<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>步骤条 - 组件演示</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../components/steps/steps.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🚀 openHarmony_Cordova_NutpiDesign</h1>
            <p class="subtitle">组件演示 - 步骤条</p>
        </header>

        <nav class="demo-nav">
            <a href="../index.html" class="nav-back">← 返回首页</a>
        </nav>

        <main class="main-content">
            <section class="demo-section">
                <h2>📍 步骤条演示</h2>
                
                <div class="demo-container">
                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>基础步骤条</h3>
                        <div id="basicSteps"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>带描述的步骤条</h3>
                        <div id="descSteps"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>当前步骤 - 第二步</h3>
                        <div id="currentSteps"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>已完成状态</h3>
                        <div id="finishSteps"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>错误状态</h3>
                        <div id="errorSteps"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>垂直方向</h3>
                        <div id="verticalSteps"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>小尺寸</h3>
                        <div id="smallSteps"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>大尺寸</h3>
                        <div id="largeSteps"></div>
                    </div>

                    <div class="demo-item" style="grid-column: 1 / -1;">
                        <h3>交互演示</h3>
                        <div id="interactiveSteps"></div>
                        <div style="margin-top: 16px; display: flex; gap: 8px;">
                            <button id="prevBtn" class="btn btn-secondary">← 上一步</button>
                            <button id="nextBtn" class="btn btn-primary">下一步 →</button>
                        </div>
                    </div>
                </div>
            </section>

            <section class="demo-section">
                <h2>使用代码</h2>
                <pre><code>// 1. 引入文件
&lt;link rel="stylesheet" href="components/steps/steps.css"&gt;
&lt;script src="components/steps/steps.js"&lt;/script&gt;

// 2. 创建容器
&lt;div id="stepsContainer"&lt;/div&gt;

// 3. 初始化步骤条组件
const steps = new Steps({
    container: '#stepsContainer',
    items: [
        { title: '步骤1', description: '填写信息' },
        { title: '步骤2', description: '确认信息' },
        { title: '步骤3', description: '完成' }
    ],
    current: 0
});

// 4. 设置当前步骤
steps.setCurrent(1);

// 5. 下一步
steps.next();

// 6. 上一步
steps.prev();</code></pre>
            </section>
        </main>

        <footer class="footer">
            <p>&copy; 2025 OpenHarmony 三方库适配中心 | MIT License</p>
        </footer>
    </div>

    <script src="../components/steps/steps.js"></script>
    <script>
        // 基础步骤条
        new Steps({
            container: '#basicSteps',
            items: [
                { title: '步骤1' },
                { title: '步骤2' },
                { title: '步骤3' }
            ]
        });

        // 带描述的步骤条
        new Steps({
            container: '#descSteps',
            items: [
                { title: '步骤1', description: '填写信息' },
                { title: '步骤2', description: '确认信息' },
                { title: '步骤3', description: '完成' }
            ]
        });

        // 当前步骤 - 第二步
        new Steps({
            container: '#currentSteps',
            items: [
                { title: '步骤1', description: '已完成' },
                { title: '步骤2', description: '进行中' },
                { title: '步骤3', description: '待进行' }
            ],
            current: 1
        });

        // 已完成状态
        new Steps({
            container: '#finishSteps',
            items: [
                { title: '步骤1', description: '已完成' },
                { title: '步骤2', description: '已完成' },
                { title: '步骤3', description: '已完成' }
            ],
            current: 3,
            status: 'finish'
        });

        // 错误状态
        new Steps({
            container: '#errorSteps',
            items: [
                { title: '步骤1', description: '已完成' },
                { title: '步骤2', description: '出错' },
                { title: '步骤3', description: '待进行' }
            ],
            current: 1,
            status: 'error'
        });

        // 垂直方向
        new Steps({
            container: '#verticalSteps',
            direction: 'vertical',
            items: [
                { title: '步骤1', description: '填写信息' },
                { title: '步骤2', description: '确认信息' },
                { title: '步骤3', description: '完成' }
            ],
            current: 1
        });

        // 小尺寸
        new Steps({
            container: '#smallSteps',
            size: 'small',
            items: [
                { title: '步骤1' },
                { title: '步骤2' },
                { title: '步骤3' }
            ]
        });

        // 大尺寸
        new Steps({
            container: '#largeSteps',
            size: 'large',
            items: [
                { title: '步骤1', description: '填写信息' },
                { title: '步骤2', description: '确认信息' },
                { title: '步骤3', description: '完成' }
            ]
        });

        // 交互演示
        const interactiveSteps = new Steps({
            container: '#interactiveSteps',
            items: [
                { title: '步骤1', description: '填写信息' },
                { title: '步骤2', description: '确认信息' },
                { title: '步骤3', description: '完成' }
            ],
            current: 0
        });

        document.getElementById('nextBtn').addEventListener('click', () => {
            interactiveSteps.next();
        });

        document.getElementById('prevBtn').addEventListener('click', () => {
            interactiveSteps.prev();
        });
    </script>

    <style>
        .demo-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .demo-item {
            background: var(--bg-light);
            padding: 16px;
            border-radius: 8px;
            overflow: visible;
            position: relative;
        }

        .demo-item h3 {
            margin-top: 0;
            margin-bottom: 16px;
            font-size: 16px;
            color: var(--text-primary);
        }

        .demo-item > div:first-of-type {
            margin-bottom: 12px;
            overflow: visible;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            transition: var(--transition);
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            opacity: 0.9;
        }

        .btn-secondary {
            background: #f0f0f0;
            color: var(--text-primary);
        }

        .btn-secondary:hover {
            background: #e0e0e0;
        }

        @media (max-width: 768px) {
            .demo-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</body>
</html>
